<template>
    <div>
        <!-- 主键传值 父给子传 
        v-bind绑定变量 可简写为： 
        -->
    <Title :title="title"></Title>
    <div>id:29245</div>
    <div style="height: 200px;" ref="box"></div>
    <div> </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Radar } from '@antv/g2plot';
const box = ref(null);
import Title from'./Title.vue'
const title = ref('工程设备29245数据雷达历史收集');
const Tree = ()=>{
    const radarPlot = new Radar(box.value, {
  data: [
  { name: 'tsp', star: 61},
  { name: 'pm10', star:108 },
  { name: 'pm25', star: 59 },
  { name: 'noise', star: 66.7 },
  { name: 'humidity', star: 61},
  { name: 'wind-speed', star: 3 },
  { name: 'winde-direction', star: 77 },
],
  xField: 'name',
  yField: 'star',
  appendPadding: [0, 10, 0, 10],
  meta: {
    star: {
      alias: 'star 数量',
      min: 0,
      nice: true,
      formatter: (v) => Number(v).toFixed(2),
    },
  },
  xAxis: {
    tickLine: null,
  },
  yAxis: {
    label: false,
    grid: {
      alternateColor: 'rgba(0, 0, 0, 0.04)',
    },
  },
  // 开启辅助点
  point: {
    size: 2,
  },
  area: {},
});
radarPlot.render();

}
onMounted(async () => {
    Tree();
})
</script>

<style lang="less">
    
</style>